<template>
  <div class="system">
    <el-dialog :visible.sync="visible" destroy-on-close>
      <div class="panelWrap">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>{{ isEdit ? '修改平台' : '添加平台' }}</div>
          <i class="el-icon-close" @click="handleCloseDialogUpdate" />
        </div>

        <div class="system-main m-r-80">
          <el-form ref="form" class="system-form m-t-40 flex flexac flexdc" :model="form" label-width="auto">
            <!-- <el-form-item v-if="!isEdit" label="系统平台ID">
                  <el-input v-model="form.sysId" class="sysName " placeholder="请输入系统Id..." />
                </el-form-item> -->

            <div class="sys-nameBox flex flexac m-b-20 m-l-10">
              <span class="sysName m-l-20"><span class="mustval">*</span>系统名：</span>
              <el-input v-model="form.name" class="sysName-input coInput" placeholder="请输入系统名..." />
            </div>

            <div class="shorterForm m-b-20 m-l-20">
              <span class="short-name m-l-20"><span class="mustval">*</span>简称：</span>
              <el-input v-model="form.nameSimple" class="short-input coInput" placeholder="请输入系统简称..." />
            </div>

            <div class="sysWechat m-r-35">
              <span class="isWechat">是否需要绑定微信：</span>
              <el-select v-model="form.isWechat" class="isWechat-select coInput" placeholder="请选择是否需要绑定微信">
                <el-option label="需要" value="1" />
                <el-option label="不需要" value="0" />
              </el-select>
            </div>

            <div class="preview m-t-20">
              <span class="preview-text m-l-20">图片预览：</span>
              <el-image class="editLogo" :src="form.logo" fit="fill" lazy>
                <div slot="error" class="image-slot">
                  <el-image class="errorImg" :src="url" lazy fit="fill" />
                </div>
              </el-image>
            </div>

            <div class="system-logo m-t-20">
              <span class="logo">系统logo：</span>
              <el-input v-model="form.logo" class="logo-input coLogoInput" placeholder="请输入系统logo地址..." />
            </div>

            <div class="system-entry m-t-20">
              <span class="entry"><span class="mustval">*</span>系统入口：</span>
              <el-input v-model="form.entry" class="entry-input coLogoInput" placeholder="请输入系统入口地址..." />
            </div>
          </el-form>

          <div class="flex flexac flextc footer m-t-40 m-l-90 m-b-40">
            <el-button v-if="!isEdit" class="btn saveBtn m-r-20 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
            <el-button v-else class="btn m-r-20 el-icon-circle-check" type="success" @click="handleSave(1)">更 新</el-button>
            <el-button class="btn clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
          </div></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateSys, createSysAdd } from '@/api/baseInfo/authority/sys'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'System',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      dataList: [],
      formOrigin: {
        entry: '',
        id: 0,
        isWechat: '',
        logo: '',
        name: '',
        nameSimple: '',
        version: 1
      },
      form: { ...this.data },
      url: require('@/assets/error.png')
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      if (this.form.id === 0) {
        this.form = { ...this.formOrigin }
      }
      this.visible = v
    },
    data(v) {
      if (v.id === 0) {
        this.form = { ...this.formOrigin }
      } else {
        this.form = { ...v }
      }
    }
  },
  mounted() {
  },
  methods: {
    handleCloseDialog() {
      console.log('子组件关闭')
      this.$emit('handleCloseDialog')
    },
    handleCloseDialogUpdate() {
      this.$emit('handleRefresh')
      this.$emit('handleCloseDialog')
    },
    handleSave(type) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '请输入系统名称')
        return
      }
      if (!(/^\S+$/.test(this.form.nameSimple))) {
        showNotice('error', '提示', '请输入系统简称')
        return
      }
      if (!(/^\S+$/.test(this.form.isWechat))) {
        showNotice('error', '提示', '请选择是否绑定微信')
        return
      }
      if (!(/^\S+$/.test(this.form.entry))) {
        showNotice('error', '提示', '请输入系统链接地址')
        return
      }

      const params = {
        id: this.form.id,
        logo: this.form.logo,
        entry: this.form.entry,
        name: this.form.name,
        nameSimple: this.form.nameSimple,
        isWechat: this.isEdit === false ? parseInt(this.form.isWechat) : this.form.isWechat === '需要' ? 1 : 0,
        version: this.form.version
      }
      // console.log(params)
      // console.log(this.form)
      if (type === 0) {
        this.handlecreateSysAdd(params)
      } else {
        this.handleUpdate(params)
      }
    },
    handlecreateSysAdd(data) {
      // console.log(this.form)
      createSysAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    handleUpdate(data) {
      updateSys(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        }
      })
    },
    handleRefresh() {
      this.refresh = true
      setTimeout(() => {
        this.refresh = false
      }, 1200)
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/public.scss';

.system {
  height: 100%;
  .panelWrap {
    width: 800px;
    margin-left: -140px;
    background: #ffffff;
    .system-main {
      .system-form {
        .coInput {
          width: 240px;
        }
        .coLogoInput {
          width: 360px;
        }
        .sys-nameBox {
          .sysName {}
          .sysName-input {}
        }
        .shorterForm {
          .short-name {}
          .short-input {}
        }
        .sysPlatform {
          .platform-name {}
          .platform-select {}
        }
        .sysWechat {
          .isWechat {}
          .isWechat-select {}
        }
        .preview {
          .preview-text {
            vertical-align: top;
          }
          .editLogo {
            border: 1px solid rgba(225,225,225,.5);
            width: 240px;
            height: 150px;
            border-radius: 5px;
            .image-slot {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              background: #eeeeee;
              .errorImg {
                width: 60px;
                height: 60px;
                margin: 40px 0 0 90px;
              }
            }
          }
        }
        .system-logo {
          margin-left: 140px;
          .logo {
            width: 70px;
          }
          .logo-input {}
        }
        .system-entry {
          margin-left: 130px;
          .entry {}
          .entry-input {}
        }
      }
      .footer {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}

</style>
